/**
 * A tab widget.
 *
 * (c) Copyright 2011 Nokia Corporation. All rights reserved.
 */

import Qt 4.7

Item {
    id: tabWidget;

    // Setting the default property to stack.children means any child items
    // of the TabWidget are actually added to the 'stack' item's children.
    // See the "Writing QML Components: Properties, Methods and Signals"
    // documentation for details on default properties.
    default property alias content: stack.children;

    signal tabClicked(variant current);
    property int current: 0;

    onCurrentChanged: setOpacities();
    Component.onCompleted: setOpacities();

    function setOpacities() {
        for (var i = 0; i < stack.children.length; ++i) {
            stack.children[i].opacity = (i == current ? 1 : 0);
        }
    }

    Row {
        id: header;

        Repeater {
            model: stack.children.length;
            delegate: Rectangle {
                width: tabWidget.width / stack.children.length;
                height: 50;
                color: "white";
                border.color: "#c8c8c8";
                gradient: (tabWidget.current == index) ? gradient : null;

                Gradient {
                    id: gradient;
                    GradientStop {
                        position: 0.4;
                        color: "#87c264";
                    }
                    GradientStop {
                        position: 0.5;
                        color: "#69ae33";
                    }
                    GradientStop {
                        position: 0.7;
                        color: "#95cb7e";
                    }
                }

                // Bottom border
                Rectangle {
                    width: parent.width;
                    height: 1;
                    anchors.bottom: parent.bottom;
                    color: "#808080";
                }

                Text {
                    horizontalAlignment: Qt.AlignHCenter;
                    verticalAlignment: Qt.AlignVCenter;
                    anchors.fill: parent;
                    text: stack.children[index].title;
                    elide: Text.ElideRight;
                    font.bold: tabWidget.current == index;
                    color: (tabWidget.current == index) ? "white" : "black";
                }

                MouseArea {
                    anchors.fill: parent;
                    onClicked: {
                        tabWidget.current = index;
                        tabClicked(tabWidget.current);
                    }
                }
            }
        }
    }

    Item {
        id: stack;
        width: tabWidget.width;
        anchors.top: header.bottom;
        anchors.bottom: tabWidget.bottom;
        clip: true;
    }
}
